<template>
   <div class="container">
      <div class="title">
            <h2>数据分析/商品分析报表</h2>
      </div>
           <div class="barS">
            <div class="top-right">
                  <!-- 日期选择 -->
                       <span class="times" style="padding-right:20px;font-size:14px">时间</span> <el-date-picker
                        @change="TimetoChange()"
                        v-model="orderTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2">
                        
                    </el-date-picker>
                
                    <!-- 时间选择 -->
                        <div class="seleclist">
                        <span @click="LATESTDAYS(1)">今天</span>
                        <span @click="LATESTDAYS(7)"  >最近7天</span>
                         <span @click="LATESTDAYS(7)"  >最近30天</span>
                         <span @click="LATESTDAYS(7)"  >本周</span>
                         <span @click="LATESTDAYS(7)"  >本月</span>
                        </div>
                    
                    </div>


                  <div class="filter-container">
                     <span class="time" style="padding-left:20px;font-size:14px">搜索</span> 
                    <Select class="toolbar-item Select" clearable v-model="orderStatus" @on-change="handleFilter" style="width:150px;" placeholder="状态">
                       <Option v-for="item in importanceOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                   </Select>
                  <Select class="toolbar-item Select" clearable v-model="orderStatus" @on-change="handleFilter" style="width:150px;" placeholder="状态">
                     <Option v-for="item in calendarTypeOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                 <!-- <span class="time">商品名称</span>  -->
                  <el-input placeholder="商品名称" v-model="listQuery.title" style="width: 200px;" class="toolbar-item Select" @keyup.enter.native="handleFilter"/>
                    <el-button v-waves class="toolbar-item Select" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
                    <el-button v-waves :loading="downloadLoading" class="toolbar-item Select" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
                    <!-- <el-button v-model="showReviewer" class="toolbar-item Select" style="margin-left:15px;" @change="tableKey=tableKey+1">清空</el-button> -->
                  </div>


                      <div class="getgoodlist">
                         <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"

                            >
                            <el-table-column
                            prop="merchandise"
                            label="商品名称"
                            sortable
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="ProductID"
                            label="商品编号"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="volume"
                            label="销售数量"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="volumeAmount"
                            label="销售金额"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="discount"
                            label="促销优惠金额"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="RefundAmount"
                            label="退款数量"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="RefundAmount"
                            label="退款金额"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="pastNum"
                            label="过期数量"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="pastAmount"
                            label="过期金额"
                            sortable
                            width="180">
                            </el-table-column>
                             <el-table-column
                            prop="TotalAmount"
                            label="总额"
                            sortable
                            width="180">
                            </el-table-column>
                        </el-table>
                        	    <div class="Pagination" style="text-align: left;margin-top: 20px;float:right;padding-right:40px">
                               <div class="page-foot">
                                        <el-pagination @size-change="handleSizeChange" 
                                        @current-change="handleCurrentChange" 
                                        :current-page="pageNumber" :page-sizes="[3, 10, 50, 100]" 
                                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" 
                                        :total="totalCount">
                                        </el-pagination>
                                    </div>
                    </div>
                    </div>

           </div>
   </div>
</template>
<script>
export default {
  data() {
    return {
        listQuery: {
        pageNumber: 1,
        pageSize: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      
      pageNumber: 1, // 页码
      pageSize: 5, // 页容量
      totalCount: 20, //总数
      //下载
     downloadLoading:false,
     orderTime: [],
    importanceOptions: [
        {
          value: 0,
          label: "全部商品类"
        },
        {
          value: 1,
          label: "自定义商品类"
        },
       
      ],
    calendarTypeOptions:[
        {
          value: 0,
          label: "全部售货机"
        },
        {
          value: 1,
          label: "自定义售货机"
        },
      ],
          //选择日期
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
       //清单
         tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
    };
  },
  methods:{
    //搜索
        handleFilter() {
     
    },
    //下载
    handleDownload(){

    },
     // 当页容量改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNumber = 1;
      // this.Myordergoodlist();
    },
    // 当页码改变
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      // this.Myordergoodlist();
    },
      //日期选择计算
    TimetoChange() {
      // 计算时间间隔
      var date = new Date(this.orderTime[0]); //开始时间
      var startData =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      //  "yyyy-MM-dd ");
      var dataold = new Date(this.orderTime[1]); //结束时间
      this.endDateStr =
        date.getFullYear() +
        "-" +
        (dataold.getMonth() + 1) +
        "-" +
        dataold.getDate();
      var LentData = dataold.getTime() - date.getTime(); //时间差的毫秒数
      //计算出相差天数
      this.interval = Math.floor(LentData / (24 * 3600 * 1000));
      //调用环形图
      this.recentDay = this.interval;
      this.echarts(this.interval);
      this.drawLine(this.recentDay);
    },
    //最近7天-最近一个月
    LATESTDAYS(value) {
      if (value == 1) {
        this.recentDay = 1;
        this.interva = 1;
        this.drawLine();
        this.echarts();
      } else if (value == 7) {
        this.recentDay = 7;
        this.drawLine();
        this.weekdaty();
      } else if (value == 30) {
        this.recentDay = 30;
        this.drawLine();
        this.mounthdaty();
      }
    },

    // 前一周时间
    weekdaty() {
      const end = new Date(); //
      //  "yyyy-MM-dd ");
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      var now = new Date();
      var date = new Date(now.getTime() - 7 * 24 * 3600 * 1000);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      var starttime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      var endtime =
        end.getFullYear() + "-" + (end.getMonth() + 1) + "-" + end.getDate();
      var LentData1 = end.getTime() - start.getTime(); //时间差的毫秒数
      //计算出相差天数
      var interval1 = Math.floor(LentData1 / (24 * 3600 * 1000));
      this.endDateStr = endtime;
      this.interval = interval1;
      // this.echarts(interval1);
    },

    //前一个月时间
    mounthdaty() {
      var today = new Date();
      var start = new Date(today.getTime() - 31 * 24 * 3600 * 1000);
      var start1 =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate();
      var todaytime1 =
        today.getFullYear() +
        "-" +
        (today.getMonth() + 1) +
        "-" +
        today.getDate();
      var LentData1 = today.getTime() - start.getTime(); //时间差的毫秒数
      //计算出相差天数
      var interval1 = Math.floor(LentData1 / (24 * 3600 * 1000));
      this.interval = interval1;
      this.endDateStr = todaytime1;
      // this.echarts(interval1,todaytime1);
    },
  }
};
</script>

<style>
@import "../../style/MarketingList/index.css";
.times{
  margin-left: 27px
}
</style>
